<template>
	<view class="main" :style="showBool || soldShow ? 'overflow: hidden;' : ''">
		<!--        <u-swiper height="300" :indicator="true" :list="url+classData.carouselImages"></u-swiper> -->
		<!-- <image height="300" style="width: 100%" :src="url2 + classData.mainImage"></image> carouselImages -->
		<swiper style="border-radius: 40rpx" circular :indicator-dots="indicatorDots" :autoplay="true" :interval="3000" :duration="duration">
			<swiper-item v-for="(item, index) in getImgList(classData.carouselImages)">
				<view style="height: 300rpx !important" class="swiper-item uni-bg-red"><image :src="path + item" mode="aspectFill" style="width: 100%; height: 100%"></image></view>
			</swiper-item>
		</swiper>
		<view class="rented">
			<view class="rented-price">
				<text class="rented-top-text">
					<span>￥{{ dataSum }}</span>
					<text>/天</text>
				</text>
				<h3>热租大牌</h3>
			</view>
			<view class="rented-price" style="font-size: 25rpx">
				<view class="rented-bootom-text">
					<text>￥{{ classData.leaseGoodSkus[0].leaseRentalRules[0].originalPrice || '' }}/天</text>
					<u-icon name="question-circle" color="#fff"></u-icon>
				</view>
				<text>特划算·安心租</text>
			</view>

			<view class="minute">
				<view class="minute-top">
					<view class="minute-name">
						<text>
							<!-- <span>全新</span> -->
							{{ classData.productName || '保密中' }}
						</text>
					</view>

					<view class="str-icons">
						<view class="str-icon" v-for="(item, index) in data" :key="index">
							<u-icon :name="item.icon"></u-icon>
							<text>{{ item.str }}</text>
						</view>
					</view>

					<view class="form">
						<view class="form-row">
							<view class="form-naem">取件方式</view>
							<view class="form-text">
								<view v-for="(item, index) in formData.chmod" :key="index" @click="chmodbooton(item)">
									<text :class="['form-text-background', forRef.chmod === item ? 'avater' : 'noAvater']">
										{{ item }}
									</text>
								</view>
							</view>
						</view>

						<view class="form-row">
							<view class="form-naem">租期</view>
							<view class="form-text">
								<view v-for="(item, index) in tenancyList" :key="index" @click="tenancybooton(item, index)">
									<text
										:class="['form-text-background', tenancyindex === index ? 'avater' : '']"
										:style="{
											backgroundColor: tenancyindex === index ? '#EDF4FF' : '#F5F5F5'
										}"
									>
										{{ item.rentalDays }}{{ item.rentalDaysUnitName }}
									</text>
								</view>
								<text
									:class="['form-text-background', tenancyindex === -9 ? 'avater' : '']"
									:style="{
										backgroundColor: tenancyindex === -9 ? '#EDF4FF' : '#F5F5F5'
									}"
									@click="openInput()"
								>
									{{ numdata ? numdata + '天' : '自定义' }}
								</text>
							</view>

							<u-popup round="20" :overlay="false" :show="showInput" @close="close" mode="center">
								<view class="popup">
									<input v-model="numdata" type="text" placeholder="请输入租期天数" />
									<text class="error-text">{{ numdataVerifyText }}</text>
									<view class="botton">
										<button style="background: #ccc; color: #7c5fff; margin-right: 30rpx" @click="close">取消</button>
										<button @click="submitInput">确认</button>
									</view>
								</view>
							</u-popup>
						</view>
						<view class="form-row">
							<view class="form-naem">数量</view>
							<view class="form-text">
								<u-icon name="minus-circle" size="25" @click="count(-1)"></u-icon>
								<text class="number">{{ forRef.num }}</text>
								<u-icon name="plus-circle" size="25" @click="count(1)"></u-icon>
							</view>
						</view>
					</view>

					<view class="minute-bottom">
						<view class="img-background">
							<view class="minute-top">——放心租——</view>
							<view class="minute-bot">
								<view v-for="(item, index) in peaceList" class="minute-img">
									<image :src="item.img" style="width: 46rpx; height: 46rpx"></image>
									<text>{{ item.name }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- :classData="classData" -->
			<particulars
				style="margin-top: 30rpx"
				:classData="[classData.detailImages, classData.faqImages, classData.parameterImages, classData.rentalProcessImages]"
			></particulars>
		</view>

		<view class="footer">
			<view class="footer-margin">
				<view class="top">
					<view>
						<text>合计：</text>
						<text class="picker">￥{{ numberSum }}</text>
						<text class="tag">惠</text>
					</view>

					<view class="rental">日租价：￥{{ dataSum }}/天</view>
				</view>
				<view class="bootom">
					<view class="bootom-display" @click="booton('home')">
						<img src="/static/tabBar/index.png" class="imgs" />
						<text>首页</text>
					</view>
					<view class="bootom-display" @click="keFu()">
						<img src="/static/main/Frame2x.png" class="imgs" />
						<text>客服</text>
					</view>
					<view class="bootom-display" @click="collectionBool ? deleteCollectin(1) : setCollection()">
						<img v-if="!collectionBool" src="/static/main/3x.png" class="imgs" />
						<img v-else src="/static/main/3y.png" class="imgs" />
						<text>收藏</text>
					</view>
					<view>
						<button @click="deposit()" v-if="isToken">免押租</button>
						<button open-type="getPhoneNumber" @getphonenumber="getPhonenumber" v-else>免押租</button>
					</view>
				</view>
			</view>
		</view>

		<u-popup :round="20" :show="depositShow" mode="bottom" @close="depositClose">
			<view class="deposit-bootom">
				<view class="top">
					乐亨租赁
					<text>申请</text>
				</view>
				<view class="deposit-text">
					<text class="name-text">获取你的头像和昵称</text>
					<text>将用于为你提供本应用当前服务</text>
				</view>
				<view class="deposit-avater">
					<view class="avater-image">
						<image style="width: 88rpx; height: 88rpx" src="/static/main/cs02.jpg" mode="aspectFill"></image>
						<text>头像</text>
					</view>
					<view class="avater-button">更换</view>
				</view>
				<view class="deposit-button">
					<button class="left">拒绝</button>
					<button @click="hotline()">同意</button>
				</view>
			</view>
		</u-popup>

		<u-popup :round="20" :closeable="true" :show="hotlineShow" mode="center" @close="hotlineClose">
			<view class="hotline-center">
				<view class="hotline-top">
					<view style="display: flex; align-items: center">
						<image style="width: 88rpx; height: 88rpx" src="/static/main/cs02.jpg" mode="aspectFill"></image>
						<view class="hotline-text">
							<text style="font-weight: 600; line-height: 60rpx">平台热线</text>
							<text style="font-size: 26rpx; color: #777777">0719-135687612</text>
						</view>
					</view>
					<u-icon name="arrow-right" size="25"></u-icon>
				</view>

				<view style="margin-top: 30rpx; font-weight: 500">
					<span style="color: red">*</span>
					<text>扫码添加客服微信</text>
				</view>

				<view class="hotline-m">
					<image style="width: 250rpx; height: 250rpx" src="/static/main/cs01.jpg" mode="aspectFill"></image>
				</view>
			</view>
		</u-popup>

		<u-popup :round="20" :show="soldShow" mode="center">
			<view class="sold-center">
				<view class="sold-text">商品已下架，请重新选择商品</view>
				<button @click="soldClose()">确认</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
import particulars from '@/subPages/components/particulars.vue';
import api from '@/api/index.js';
import myApi from '@/api/my';
import main from '@/api/main.js';
import { getDate } from '@/utils/index.js';
import { baseUrl } from '../../config.js';

export default {
	components: {
		particulars
	},
	data() {
		return {
			showBool: false, //控制数控是否可以滚动
			soldShow: false, //商品下架通知
			hotlineShow: false, //热线扫码弹窗
			depositShow: false, //免押租弹框控制
			showInput: false, // 控制输入框的显示与隐藏
			numdata: null, //租期天数
			numberSum: 0, //合计金额
			dataSum: 0, //日租金
			classData: {},
			url2: '',
			//放心租
			peaceList: [
				{ img: '/static/main/Group90x.png', name: '假一赔三' },
				{ img: '/static/main/Group92.png', name: '全国联保' },
				{ img: '/static/main/Group93.png', name: '免赔保障' },
				{ img: '/static/main/Group91.png', name: '隐私清除' }
			],
			path: api.getPath(),
			data: [
				{
					str: '平台担保',
					icon: 'rmb-circle'
				},
				{
					str: '信用免押',
					icon: 'rmb-circle'
				},
				{
					str: '租后无忧',
					icon: 'rmb-circle'
				},
				{
					str: '现货现发',
					icon: 'rmb-circle'
				}
			],
			// 租期列表
			tenancyList: [],
			formData: {
				chmod: ['自提', '邮寄'],
				tenancy: ['1月', '2月', '6月', '1年']
			},
			skuS: [],
			tenancyindex: 0,

			forRef: {
				chmod: '自提', //取件方式
				tenancy: null, //天数
				num: 1 //租物数量
			},
			id: null,
			//判断是否被收藏
			collectionBool: false,
			//判断自定义天数
			numdataVerifyText: '',
			isToken: false
		};
	},
	onLoad(e) {
		this.id = e.id;
		if (e.id) {
			//获取商品详情
			this.getIdClass(e.id);
			this.id = e.id;
		}
		if (uni.getStorageSync('token')) {
			this.getCollectionId();
			this.isToken = true;
		}
	},
	mounted() {
		this.url2 = baseUrl;
		const pages = getCurrentPages(); // 获取当前页面栈
		const currentPage = pages[pages.length - 1]; // 当前页面
		const query = currentPage.options; // 获取跳转时传递的参数
		this.id = query.id;
	},
	methods: {
		getImgList(row) {
			let list = row?.split(',');
			if (list) {
				return list;
			}
			return [];
		},
		getPhonenumber(e) {
			uni.showLoading({
				title: '登录中...',
				mask: true
			});
			if (e.detail.errMsg == 'getPhoneNumber:ok') {
				console.log('授权成功');
				const data = {
					response: e.detail.encryptedData,
					sign: e.detail.sign
				};
				my.getAuthCode({
					success: (authRes) => {
						// 请求用户信息接口
						if (authRes.authCode) {
							const parentId = uni.getStorageSync('parentId');
							myApi
								.Login({
									response: JSON.stringify(data),
									code: authRes.authCode,
									parentId: parentId
								})
								.then((res) => {
									this.isToken = true;
									uni.hideLoading();
									uni.setStorageSync('token', res.token);
								});
						}
					}
				});
			}
		},
		keFu() {
			this.hotlineShow = true;
		},
		//自定义天数校验
		numdataVerify() {
			const value = this.numdata.trim();
			const regex = /^\d{1,4}$/;
			if (!regex.test(value)) {
				this.numdataVerifyText = '请输入0-9999之间的整数';
				return false;
			}
			if (value < this.classData.minTenancy) {
				this.numdataVerifyText = `${this.classData.minTenancy}天起租`;
				return false;
			}
			this.numdataVerifyText = '';
			return true;
		},
		soldClose() {
			//商品已下架，返回上级页面
			uni.navigateBack({
				data: 1
			});
		},
		deposit() {
			//免押租
			// this.depositShow = true;
			// this.showBool = true;
			this.forRef.numberSum = this.numberSum;
			this.forRef.id = this.id;
			// const token = uni.getStorageSync('token');
			// if (!token) {
			// 	uni.showToast({
			// 		title: '请先登录，在下单',
			// 		icon: 'error'
			// 	});
			// 	return;
			// }
			//新增订单信息
			uni.navigateTo({
				url: `/subPages/mine/order?forRef=${encodeURIComponent(JSON.stringify(this.forRef))}`
			});
		},
		depositClose() {
			this.depositShow = false;
			this.showBool = false;
		},
		hotline() {
			this.depositShow = false;
			this.hotlineShow = true;
			this.showBool = true;
		},
		hotlineClose() {
			this.hotlineShow = false;
			this.showBool = false;
		},
		openInput() {
			this.tenancyindex = -9;
			this.showInput = true; // 显示输入框
		},
		close() {
			this.tenancyindex = 0;
			this.showInput = false; // 隐藏输入框
			this.numdata = null; // 清空输入框内容
		},
		submitInput() {
			// 处理提交逻辑，例如保存数据
			if (this.numdata === null) {
				this.close();
			}
			if (!this.numdataVerify()) {
				return;
			}
			this.forRef.tenancy = Number(this.numdata);
			main.getPrice({
				id: this.classData.leaseGoodSkus[0].id,
				day: this.forRef.tenancy,
				number: this.forRef.num
			}).then((res) => {
				if (res.code == 200) {
					this.numberSum = res.data.totalAmount;
					this.dataSum = res.data.dailyAmount;
				}
			});
			this.showInput = false; // 隐藏输入框
			// this.countSum();
		},
		//计算
		countSum() {
			this.numberSum = this.forRef.tenancy * this.forRef.num * this.dataSum;
		},
		count(num) {
			if (this.forRef.num <= 0 && num < 0) {
				return;
			}
			this.forRef.num += num;
			main.getPrice({
				id: this.classData.leaseGoodSkus[0].id,
				day: this.forRef.tenancy,
				number: this.forRef.num
			}).then((res) => {
				if (res.code == 200) {
					this.numberSum = res.data.totalAmount;
					//	this.dataSum = res.data.dailyAmount;
				}
			});
			// this.countSum();
		},
		// 取件方式
		chmodbooton(item) {
			this.forRef.chmod = item;
		},
		tenancybooton(item, index) {
			this.tenancyindex = index;
			this.forRef.tenancy = item.rentalDays * item.rentalDaysUnit;
			main.getPrice({
				id: this.classData.leaseGoodSkus[0].id,
				day: this.forRef.tenancy,
				number: this.forRef.num
			}).then((res) => {
				if (res.code == 200) {
					this.numberSum = res.data.totalAmount;
					this.dataSum = res.data.dailyAmount;
				}
			});
		},
		booton(row) {
			if (row === 'home') {
				uni.reLaunch({
					url: '/pages/index'
				});
			}
		},
		getIdClass(id) {
			main.getIdClass(id)
				.then((data) => {
					this.classData = data.data;
					console.log(this.classData, '商品数据');
					console.log('this.classData', this.classData);
					if (this.classData.ifCollect) {
						this.collectionBool = true;
					}
					console.log('classData', this.classData);
					// this.formData.tenancy =  this.classData.
					this.dataSum =
						(this.classData &&
							this.classData.leaseGoodSkus &&
							this.classData.leaseGoodSkus[0] &&
							this.classData.leaseGoodSkus[0].leaseRentalRules &&
							this.classData.leaseGoodSkus[0].leaseRentalRules[0]?.everydayPrice) ||
						'暂未标价';
					// this.countSum();
					this.tenancyList = this.classData.leaseDayRules.map((item) => {
						return {
							id: item.id,
							rentalDays: item.rentalDays, // 数字
							rentalDaysUnit: item.rentalDaysUnit, // 周期
							rentalDaysUnitName:
								item.rentalDaysUnit == 1 ? '天' : item.rentalDaysUnit == 7 ? '周' : item.rentalDaysUnit == 30 ? '月' : item.rentalDaysUnit == 365 ? '年' : ''
						};
					});

					this.tenancybooton(this.tenancyList[0], 0);
				})
				.catch((erro) => {
					console.log(erro);
				});
		},
		// addProduct() {
		//   // 准备商品数据，根据实际API要求调整字段
		//   const productData = {
		//     id: this.id, // 可能是商品ID或分类ID，根据实际情况调整
		//     name: this.productName, // 商品名称，需要在data中定义
		//     price: this.productPrice, // 商品价格，需要在data中定义
		//     description: this.productDescription, // 商品描述，需要在data中定义
		//     // 其他必要的商品字段...
		//   };

		//   // 调用新增商品API
		//   api.addProduct(productData)
		//     .then((data) => {
		//       // 显示成功提示
		//       uni.showToast({
		//         title: '商品添加成功',
		//         icon: 'success',
		//         duration: 2000
		//       });

		//       // 可选：添加成功后执行其他操作，如返回上一页或刷新列表
		//       setTimeout(() => {
		//         uni.navigateBack(); // 返回上一页
		//       }, 2000);
		//     })
		//     .catch((error) => {
		//       // 显示错误提示
		//       uni.showToast({
		//         title: '添加失败: ' + (error.message || '未知错误'),
		//         icon: 'none',
		//         duration: 3000
		//       });
		//       console.error('添加商品失败:', error);
		//     });
		// },

		setCollection() {
			if (uni.getStorageSync('token')) {
				//已登录判断是否登录过期
				main.getUserInfo()
					.then((res) => {
						return true;
					})
					.catch((erro) => {
						return false;
					});
			} else {
				uni.showToast({
					title: '登录失效，请重新登录',
					icon: 'none'
				});
				return false;
			}

			let obj = this.classData;
			obj.productId = this.classData.id;
			main.setCollection(obj)
				.then((data) => {
					this.collectionBool = true;
					uni.showToast({
						title: '收藏成功',
						icon: 'success', // 可选 success/loading/none
						duration: 2000 // 持续时间，单位ms
					});
				})
				.catch((erro) => {
					console.log(erro);
				});
		},
		getCollectionId() {
			main.getCollectionId(this.id)
				.then((data) => {
					console.log('data', data);
					// this.collectionBool = true;
				})
				.catch((erro) => {
					console.log(erro);
				});
		},
		// deletFun(ids) {
		//     console.log("123");
		//     address.deleteAddressIds(ids).then((res) => {
		//         console.log(res);
		//         if (res.code == 200) {
		//             uni.showToast({
		//                 title: "删除成功",
		//                 icon: "none",
		//             });
		//             this.getAddressList();
		//         }
		//     });
		// },
		deleteCollectin() {
			main.deleteCollectin(this.id)
				.then((data) => {
					console.log('data,', data);
					this.collectionBool = false;
					if (data.code == 200) {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						});
						this.getCollectionId();
					}
				})
				.catch((erro) => {
					console.log(erro);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.error-text {
	color: #ff4545;
	font-size: 24rpx;
	margin-top: 10rpx;
	position: absolute;
}
.specifications {
	margin-left: 20rpx;
}
.main {
	height: 100vh;
	width: 100%;
}

.sold-center {
	height: 230rpx;
	width: 600rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	.sold-text {
		font-weight: 600;
		margin-top: 50rpx;
		margin-bottom: 50rpx;
	}

	button {
		width: 200rpx;
		height: 70rpx;
		color: #1677ff;
		line-height: 70rpx;
		border-radius: 40rpx;
		background-color: #d8e8fd;
	}
}

.hotline-center {
	height: 500rpx;
	width: 600rpx;
	margin: 50rpx;

	.hotline-top {
		margin-top: 20rpx;
		height: 150rpx;
		background-color: #f6faff;
		border-radius: 10rpx;

		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;

		.hotline-text {
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
		}
	}

	.hotline-m {
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
	}
}

.deposit-bootom {
	height: 400rpx;
	margin: 30rpx 50rpx;

	.top {
		color: #1677ff;
		font-size: 50rpx;
		font-weight: bold;
		display: flex;
		align-items: center;

		text {
			margin-left: 20rpx;
			color: #333;
			font-size: 30rpx;
			font-weight: normal;
		}

		margin-bottom: 20rpx;
	}

	.deposit-text {
		display: flex;
		flex-direction: column;

		.name-text {
			font-weight: 600;
		}

		margin-bottom: 30rpx;
	}

	.deposit-avater {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 50rpx;

		.avater-image {
			display: flex;
			align-items: center;

			image {
				border-radius: 50%;
			}

			text {
				margin-left: 10rpx;
				font-weight: 600;
			}
		}

		.avater-button {
			color: #1677ff;
		}
	}

	.deposit-button {
		display: flex;
		justify-content: space-evenly;

		button {
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #1677ff;
			color: #fff;
			border-radius: 10rpx;
		}

		.left {
			background-color: transparent;
			color: #aaaaaa;
		}
	}
}

.imgs {
	width: 34rpx;
	height: 34rpx;
}

.footer {
	position: fixed;
	bottom: 0;
	padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
	left: 0;
	width: 100%;
	height: 200rpx;
	background-color: #fff;
	border-radius: 30rpx 30rpx 0 0;

	.footer-margin {
		margin: 20rpx 50rpx;

		.top {
			display: flex;
			align-items: center;

			.picker {
				color: red;
				font-size: 35rpx;
				font-weight: 600;
				margin-right: 5rpx;
			}

			.rental {
				margin-left: 100rpx;
				font-weight: 500;
			}
		}

		.bootom {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;

			.bootom-display {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			button {
				width: 350rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				background: linear-gradient(270deg, #7c5fff 0%, #3b5dff 100%);
				color: #fff;
				border-radius: 40rpx;
			}
		}
	}
}

.avater {
	color: #3b5dff;
	border: 1px solid #3b5dff;
}
.noAvater {
	border: 1px saddlebrown solid;
}
.popup {
	width: 400rpx;
	height: 200rpx;
	margin: 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;

	.botton {
		display: flex;
		align-items: center;
		margin-top: 100rpx;

		button {
			background: linear-gradient(270deg, #7c5fff 0%, #3b5dff 100%);
			color: #fff;
			width: 150rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 30rpx;
		}
	}
}

.rented {
	margin-top: 20rpx;
	padding-top: 30rpx;
	width: 100%;
	height: 200rpx;
	background: linear-gradient(to left, #fe4b70, #ffa75b);
	border-radius: 40rpx 40rpx 0 0;

	.rented-price {
		margin: 0 30rpx;
		display: flex;
		justify-content: space-between;
		color: #fff;

		h3 {
			font-size: 35rpx;
			font-weight: bold;
		}

		.rented-top-text {
			span {
				font-size: 35rpx;
				font-weight: bold;
			}

			text {
				font-size: 28rpx;
			}
		}

		.rented-bootom-text {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-left: 20rpx;

			text {
				text-decoration: line-through;
			}
		}
	}

	.minute {
		margin-top: 30rpx;
		width: 100%;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;

		.minute-top {
			padding: 30rpx;

			.minute-name {
				span {
					background-color: red;
					color: #fff;
					margin-right: 15rpx;
					padding: 0 5rpx;
					border-radius: 8rpx;
					font-weight: 400;
				}

				font-weight: 500;
			}

			.str-icons {
				display: flex;
				justify-content: space-between;
				align-items: center;

				margin-top: 30rpx;

				.str-icon {
					display: flex;

					text {
						margin-left: 5rpx;
					}
				}
			}

			.form {
				margin-top: 30rpx;
				width: 100%;
				height: 300rpx;
				border-radius: 30rpx;
				background-color: #f8f9ff;
				padding: 10rpx 0 0 10rpx;

				position: relative;

				.form-row {
					padding: 20rpx;
					display: flex;
					align-items: center;

					.form-naem {
						font-weight: bold;
					}

					.form-text {
						display: flex;
						align-items: center;
						position: absolute;
						left: 180rpx;
						font-size: 25rpx;

						.form-text-background {
							display: block;
							// width: 85rpx;
							width: 120rpx;
							height: 45rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							margin-right: 20rpx;
							border-radius: 10rpx;
						}

						.number {
							font-size: 30rpx;
							margin: 0 20rpx;
							color: #3b5dff;
						}
					}
				}
			}

			.minute-bottom {
				margin-top: 30rpx;
				width: 100%;
				height: 300rpx;
				border-radius: 30rpx;
				background-color: #f8f9ff;
				padding: 10rpx 0 0 10rpx;

				display: flex;
				align-items: center;
				justify-content: center;

				.img-background {
					width: 614rpx;
					height: 228rpx;
					background: url('@/static/main/Rectangle12x.png') no-repeat;
					background-size: 614rpx 228rpx;
					display: flex;
					flex-direction: column;
					align-items: center;

					.minute-top {
						margin: 0;
						padding: 0;
						width: 254rpx;
						height: 52rpx;
						background-color: #f03b4f;
						border-radius: 0 0 50rpx 50rpx;

						text-align: center;
						line-height: 50rpx;
						color: #fff;
						font-weight: 500;
						font-size: 28rpx;
					}

					.minute-bot {
						margin-top: 35rpx;
						width: 100%;
						display: flex;
						justify-content: space-evenly;

						.minute-img {
							width: 110rpx;
							height: 110rpx;
							border-radius: 15rpx;
							background-color: #fff;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-around;

							font-size: 24rpx;
							color: #f03b4f;
						}
					}
				}
			}
		}
	}
}
</style>
